<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">
    <title>Login</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./login.css">
</head>

<body>
    <div id="login-box">
        <form action="" method="post" class="form-box">
            <h3 id="title"></h3>
            <div class="input-box">
                <label for="uanme">输入用户名</label>
                <input type="text" name="" id="uanme" autocomplete="off">
                <svg t="1713947138075" class="login-icon icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5352" width="20" height="20"><path d="M511.808 512c121.344 0 219.84-100.352 219.84-224.128S633.152 63.808 511.808 63.808c-121.408 0-219.84 100.288-219.84 224.064s98.368 224.128 219.84 224.128z m302.848 139.84c-50.24-58.496-67.2-78.656-159.168-84.032h-287.04c-92.032 5.504-108.928 25.536-159.04 84.032-53.376 60.352-95.872 137.024-75.776 231.872 22.4 62.144 82.688 76.416 139.904 76.416H750.592c57.152 0 117.568-14.4 139.968-76.416 19.904-94.848-22.528-171.456-75.904-231.872z" p-id="5353" fill="#091742"></path></svg>
            </div>
            <div class="input-box">
                <label for="pwd">输入密码</label>
                <input type="password" name="" id="pwd" autocomplete="off">
                <svg t="1713947096796" class="login-icon icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4266" width="20" height="20"><path d="M776.86 376.04c-22.05 0-40.16-16.24-43.91-37.98-18.08-104.98-109.79-185.1-219.84-185.1s-201.76 80.13-219.84 185.1c-3.74 21.73-21.85 37.98-43.91 37.98-27.05 0-48.82-24.04-44.44-50.73 24.3-148.16 153.25-261.58 308.19-261.58S796.99 177.15 821.3 325.31c4.38 26.69-17.39 50.73-44.44 50.73zM850.18 418.32H180.33c-37.98 0-68.76 30.79-68.76 68.76v403.71c0 37.98 30.79 68.76 68.76 68.76h665.36c37.97 0 68.75-30.77 68.77-68.74l0.19-408c0.02-35.61-28.85-64.49-64.47-64.49zM557.73 762.56c0 24.64-19.97 44.62-44.62 44.62-24.64 0-44.62-19.97-44.62-44.62v-89.23c0-24.64 19.97-44.62 44.62-44.62 24.64 0 44.62 19.98 44.62 44.62v89.23z" p-id="4267" fill="#091742"></path></svg>
            </div>
            <button class="btn-submit">登 陆</button>
        </form>
    </div>
    <script>
        (() => {
            const title = document.querySelector('title')
            document.getElementById('title').textContent = title && title.textContent ? title.textContent : 'Login'

            const uanme = document.getElementById('uanme')
            const pwd = document.getElementById('pwd')
            const btn = document.querySelector('.btn-submit')

            btn.addEventListener('click', function (e) {
                if (!uanme.value || !pwd.value) {
                    e.preventDefault()
                    alert('表单不得为空!')
                    return
                }
            })

            const eleArray = [uanme, pwd]

            eleArray.forEach(element => {
                element.addEventListener('focus', () => {
                    const label = element.previousElementSibling
                    label.classList.add('label-top')
                })

                element.addEventListener('blur', () => {
                    const label = element.previousElementSibling
                    if (!element.value.trim()) {
                        label.classList.remove('label-top')
                    }
                })
            })
        })()
    </script>
</body>

</html>